<template>
  <div class="timeLine">
    <a-timeline>
        <a-timeline-item v-for="item in state" :key="item.index">
            <p>创建时间 {{item.mins}}</p>
            <div class="content w-100">
                <p>{{item.local}}上线</p>
                <p class="timer">张子健于{{item.mins}}- {{item.timer}} 打卡完成</p>
            </div>
        </a-timeline-item>
    </a-timeline>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive } from 'vue';
import { timerLine } from '@/api/user/index.js'
export default defineComponent({
  setup() {
    onMounted(() => {
        getTimeLine()
    })
    const state = reactive([])
    const getTimeLine = () => {
        timerLine().then(res => {
            res.data.result.forEach(el => {
                state.push(el)
            })
        })
    } 
    return {
        getTimeLine,
        state
    }
  },

})
</script>
<style scoped>
.content {
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px #ccc;
    padding: 15px;
    height: 110px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
}
.timer {
    font-weight: 100;
}
</style>